<template>
    <div class="box">
        <div id="main"></div>
        <div></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRatio } from '../store/ratio'
import { countCountry } from '../types/ratio'
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    VisualMapComponent,
    VisualMapComponentOption
} from 'echarts/components';
import { PieChart, PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    TitleComponent,
    TooltipComponent,
    VisualMapComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);

type EChartsOption = echarts.ComposeOption<
    | TitleComponentOption
    | TooltipComponentOption
    | VisualMapComponentOption
    | PieSeriesOption
>;
//echarts画图
const pie = (data: countCountry[], year: number) => {
    var chartDom = document.getElementById('main')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    //饼图各块差异过大，需要放大
    var showData = []
    var sum = 0, max = 0;

    data.forEach(item => {
        sum += item.value
        if (item.value >= max) max = item.value
    })

    // 放大规则
    var number = Math.round(max * 0.5)

    showData = data.map(item => {
        return {
            value: number + item.value,
            name: item.name
        }
    })

    option = {
        backgroundColor: '#011627',

        title: {
            text: `各国出品电影数目占比  (${year})`,
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            }
        },

        tooltip: {
            trigger: 'item'
        },

        visualMap: {
            show: false,
            min: 0,
            max: 800,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '80%',
                center: ['55%', '60%'],
                data: showData.sort(function (a, b) {
                    return a.value - b.value;
                }),
                minAngle: 20,
                roseType: 'radius',
                label: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    
                },
                labelLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },
                itemStyle: {
                    color: '#071f27',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.7)',
                },
                //还原值

                
                tooltip: {
                    trigger: 'item',
                    formatter: function (param) {
                        return param.name + ': ' + (param.value as any - number) + ' ' + (((param.value as any - number) / sum) * 100).toFixed(2) + '%'
                    }
                },


            }
        ]
    };
    option && myChart.setOption(option);
}
//获得pinia仓库
const store = useRatio()
//年份数据
const year = ref(2022)
//修改store数据
const turn = async () => {
    //等待返回结果，不然是空数组
    await store.ratio(year.value)
    pie(store.data, year.value)
}
onMounted(() => {
    turn()

})
</script>

<style scoped lang="less">
.box {
    height: 100vh;

    #main {
        height: 95%;
    }
}
</style>